<template>
  <div id="app">
    <h1 v-html="title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
      <li v-for="(item,index) in items" :key="index" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinished(item)">
        {{item.label}}
      </li>
    </ul>
    <helloWorldA msgfomfather='you die' v-on:child-tell-me-something='listenToMyBoy'></helloWorldA><!--组件传值-->
    <el-button type="primary" icon="el-icon-search" @click="getMovieDetail()">搜索</el-button>
    <!-- <HelloWorld msgfomfather='you die'></HelloWorld> -->
    <el-button @click="onmyeventclick()">弹窗</el-button>
    <ul>
      <li v-for="(item,index) in items" :key="index" :class="{cur:iscur==index}" @click="iscur = index">
        {{item.t}}
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue'
import Store from './store'
import HelloWorldA from './components/helloWorldA'
import HelloWorld from './components/helloWorld'
import vLoading from './components/index-loading'
export default {
  data () {
    return {
      title: 'qu si a',
      items: [],
      list: [],
      newItem: '',
      iscur: 0
    }
  },
  components: {
    HelloWorldA,
    HelloWorld,
    vLoading
  },
  watch: {
    items: {
      handler (items) {
        Store.save(items)
      },
      deep: true
    }
  },
  methods: {
    toggleFinished (item) {
      item.isFinished = !item.isFinished
    },
    addNew () {
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
    },
    listenToMyBoy (msg) {

    },
    getMovieDetail () {
      alert('1')
      HelloWorldA.methods.onClickMe()
    },
    onmyeventclick () {
      //  var version = Number(Vue.version.split('.')[0])
      alert(Vue.version)
    }
  },
  mounted () {
  }
}

</script>

<style>
.finished{
  text-decoration: underline;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.cur {
  height: 51px;
  background: blue;
  border-bottom: none;
  }
</style>
